<template>
  <div class="table">
    <div class="title" style="font-weight:700;">
        <tiny-icon-editor-list class="tiny-svg-size"></tiny-icon-editor-list>Work List
    </div>
    <tiny-grid
        ref="basicGridRef"
        :fetch-data="fetchData"
        :auto-resize="true"
        :pager="pagerConfig"
        :highlight-hover-row="true"
    >

      <tiny-grid-column type="index" width="60"></tiny-grid-column>

      <tiny-grid-column
          field="title"
          show-overflow
          title="题目"

      ></tiny-grid-column>
      <tiny-grid-column field="language" title="语言"></tiny-grid-column>
      <tiny-grid-column field="label" title="标签"></tiny-grid-column>
      <tiny-grid-column field="difficulty" title="难度"></tiny-grid-column>
       <tiny-grid-column field="publisher" title="发布者"></tiny-grid-column>
      <tiny-grid-column field="createTime" title="日期"></tiny-grid-column>
      <tiny-grid-column title="操作" width="100">
        <template #default="data">
          <div class="demo-custom-column">

            <tiny-icon-edit class="tiny-svg-size" @click="Edit(data.row)"></tiny-icon-edit>
          </div>
        </template>
      </tiny-grid-column>
    </tiny-grid>
  </div>

</template>

<script setup>
import {ref, inject, onMounted} from 'vue'
import {useRouter} from "vue-router";
const router = useRouter()
const axios = inject('axios')
import {
  Grid as TinyGrid, GridColumn as TinyGridColumn, Pager,
  Button as TinyButton, Notify
} from '@opentiny/vue'
import {iconEdit,IconEditorList} from '@opentiny/vue-icon'

const TinyIconEdit = iconEdit()
const TinyIconEditorList = IconEditorList()

const size = ref(Math.round((window.innerHeight - 140) / 50))
onMounted(() => {
  console.log(size.value)
})

const basicGridRef = ref()
const fetchData = ref({
  api: getData,
})

const Edit = (data)=>{
 router.push('work/'+data.id)
}
const pagerConfig = ref({
  component: Pager,
  attrs: {
    currentPage: 1,
    pageSize: size.value,
    total: 0,
    align: 'right',
    layout: 'total, prev, pager, next'
  }
})


async function getData({page}) {
  const {currentPage, pageSize} = page
   const data = await axios.get('/work/list')
  return Promise.resolve({
    result:data.data.data ,
    page: {total: 5}
  })
}


</script>
<style lang="less" scoped>
.table {
  padding: 20px;
}

.tiny-button {
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 8px;
}



.demo-custom-column {
  font-size: 0;
}

.demo-custom-column svg {
  font-size: 16px;
  fill: var(--ti-common-color-line-active);
}

.demo-custom-column svg:hover {
  fill: #40a9ff;
  cursor: pointer;
}

.demo-custom-column svg:not(:last-child) {
  margin-right: 8px;
}
.title .tiny-svg {
  fill: black;
  font-size: 18px;
  margin: 5px;
  font-weight: 900;
  transform: translateY(-2px);
}
</style>